<script setup>
import { reactive, shallowRef, defineAsyncComponent } from 'vue'

import IDemo from '@/components/IDemo'
import ISetupDemo from '@/components/ISetupDemo'
import usePoint from '@/core/hooks/usePoint'
import component1 from '@/components/component1.vue'
import component2 from '@/components/component2.vue'
// import component3 from '@/components/component3.vue'
//const component3 = defineAsyncComponent(() => import('@/components/component3.vue'))
const ArticleList = defineAsyncComponent(() => import('@/components/ArticleList.vue'))
const pageName = 'I am Login Page'
const point = usePoint()
const state = reactive({
    componentTag: component2
})
//这里用ref的话，vue给出警告Vue接收到一个组件，该组件被制成反应对象。这可能会导致不必要的性能开销，
// 应该通过将组件标记为“markRaw”或使用“shallowRef”而不是“ref”来避免。
// 如果使用 markRaw 那么currentComp将不永远不会再成为响应式对象。 所以得使用 shallowRef
let componentTag = shallowRef(component2)
const change = (idx) => {
    if (idx == 1) componentTag.value = component1
    if (idx == 2) componentTag.value = component2
    if (idx == 3) componentTag.value = ArticleList
}

const files = import.meta.globEager('../views/*.vue')
// console.dir(JSON.stringify(files))
const modules = {}

for (const key in files) {
    console.info(key)
    if (Object.prototype.hasOwnProperty.call(files, key)) {
        modules[key.replace(/(\.\/|\.ts)/g, '')] = files[key].default
    }
}

</script>
<template>
  <div>
    {{ pageName }} <br>
    <i-demo />
    <br>I18n =====> {{ $t('header.home') }}<br>
    <ISetupDemo :message="pageName" /><br>
    <br>
    <br>
    <div style="padding: 30px">
      <button @click="change('1')">组件1</button>
      <button @click="change('2')">组件2</button>
      <button @click="change('3')">组件3</button>
      <br> === {{ state.componentTag }} ===
      <hr>
      <br> === {{ componentTag }} ===
      <component :is="componentTag" />
    </div>
    <br>
    <hr>
    <component3 />
    <a-button type="primary" danger ghost> 点击鼠标获取坐标点位： X = {{ point.x }}, Y = {{ point.y }}</a-button>
  </div>
</template>